<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta charset="UTF-8">
    <title>Login</title>
</head>
<body>
    <div class="container">
        <br />
        <div class="row">
            <div class='col'></div>
            <div class='col'></div>
            <div class='col'></div>
            <div class='col'></div>
            <div class='col'><button type="submit" class="form-control btn btn-info" id='logout'>logout</button></div>
        </div>
        <br />
        <br />
        <br />   
        <nav class="nav nav-pills nav-justified">
            <a class="nav-item nav-link" href="main.html">任务管理</a>
            <a class="nav-item nav-link" href="client.html" id='client-manage'>接入子系统管理</a>
            <a class="nav-item nav-link active" href="#" id="user-manage">用户管理</a>
            <a class="nav-item nav-link" href="history.html">任务运行历史</a>
        </nav>
        <br />
        <hr />
        <div class="row">
            <div class='col-md-2'>
                <label> &nbsp;</label>
            </div>
            <form id='user-list'>
                <div class="row">
                    <div class="col">
                        <label for="userId">User Id</label>
                        <input type="text" class="form-control" name='userId' id='userId'>
                    </div>
                    <div class="col">
                        <label for="systemId">所属系统</label>
                        <select id="systemId" name="systemId" class="form-control">
                            <option value="" selected disabled>Choose here</option>
                        </select>
                    </div>
                    <div class='col'>
                        <label> &nbsp;</label>
                        <button type="submit" class="form-control btn btn-primary">查询</button>
                    </div>
                  </div>
            </form>
            <div class='col-md-1'>
                <label> &nbsp;</label>
            </div>
            <div class='col-md-2'>
                <label> &nbsp;</label>
                <button type="submit" class="form-control btn btn-primary" id='add-user'>添加用户</button>
            </div>
        </div>
        <hr />
        <table class="table">
            <thead>
              <tr>
                <th scope="col">用户id</th>
                <th scope="col">用户中文名</th>
                <th scope="col">所属系统</th>
                <th scope="col">权限角色</th>
                <th scope='col'>创建时间</th>
                <th scope='col'>操作</th>
              </tr>
            </thead>
            <tbody id='user-list-body'></tbody>
          </table>
    </div>
</body>
<script src="script/jquery-3.0.0.min.js"></script>
<script src="script/util.js"></script>
<script>
'use strict';
(function(){
    $('#add-user').bind('click', function() {
        window.location.href = 'user-modify.html';
    });

    getAllSystemId(function(list) {
        list.forEach(function(value, idx) {
            $('#systemId').append("<option value='" + value.systemId + "'>"+value.systemId+"</option>");
        });
    });

    var queryClientList = function(query) {
        $.ajax({
            url:'/admin/user-account/list',
            beforeSend: function(request) {
                request.setRequestHeader("OPERATOR-ID", username);
                request.setRequestHeader("LOGIN-TOKEN", token);
            },
            type:"POST",
            data: JSON.stringify(query),
            contentType:"application/json; charset=utf-8",
            dataType:"json",
            success: function(response) {
                if(response.code === 304) {
                    login();
                }else if(response.code === 200) {
                    $('#user-list-body').children().remove();
                    var userList = response.data;
                    if (userList === undefined || userList.length == 0) {
                        return;
                    }
                    userList.forEach(function(value, idx) {
                        var id = value.idUserAccount;
                        $('#user-list-body').append("<tr id='" + id + "'>\
                                <th scope='row'>" + value.userId + "</th>\
                                <td>" + value.userName + "</td>\
                                <td>" + value.clientInfo.systemId + "</td>\
                                <td>" + value.role + "</td>\
                                <td>" + value.createdDate + "</td>\
                                <td>\
                                <button type='submit' class='form-control btn btn-light' id='modify-" + id +"'>编辑</button>\
                                </td>\
                            </tr>");
                        $('#modify-' + id).bind('click', function() {
                            window.location.href = 'user-modify.html?id=' + id;
                        })  
                    });                                 
                }else {
                    alert(response.message);
                }
                
            }
        });
    }

    $('#user-list').submit(function(e) {
        e.preventDefault();
        var data = {
            systemId: $('#systemId').val()
        };
        queryClientList(data);
    })
    
    queryClientList({});
   //bottom     
})();
</script>
</html>